<!--
 * @Descripttion:
 * @version:
 * @Author: xiajunchen
 * @Date: 2021-05-28 10:19:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-05-31 16:17:15
-->
<template>
  <section class="timeRange-warp">
    <el-date-picker
      v-if="compType === 'date'"
      v-model="value"
      class="el-date-picker-search"
      :type="type"
      :format="showFormat"
      range-separator="至"
      :start-placeholder="this.$props.items.startPlaceholder || '请选择开始时间'"
      :end-placeholder="this.$props.items.endPlaceholder || '请选择结束时间'"
      :picker-options="endDate"
      @change="change"
    />
    <el-time-picker
      v-else
      v-model="value"
      is-range
      :value-format="showFormat"
      class="el-time-picker-search"
      range-separator="至"
      :start-placeholder="this.$props.items.startPlaceholder || '请选择开始时间'"
      :end-placeholder="this.$props.items.endPlaceholder || '请选择结束时间'"
      :picker-options="endTime"
      @change="change"
    />
  </section>
</template>
<script>
import dayjs from 'dayjs'
export default {
  name: 'TimeRange',
  props: {
    items: {
      type: Object,
      default: () => ({})
    }
  },
  data: () => ({
    value: '',
    compType: 'date',
    type: 'daterange', // 只针对el-date-picker
    endDate: { disabledDate: time => time.getTime() >= new Date().getTime() },
    endTime: { selectableRange: `00:00:00-${dayjs(new Date()).format('HH:mm:ss')}` },
    format: 'YYYY-MM-DD',
    showFormat: 'yyyy-MM-dd'
  }),
  created() {
    const types = {
      datePicker: 'daterange',
      timePicker: 'timerang',
      dateTimePicker: 'datetimerange'
    }
    const { subType } = this.$props.items
    let type = 'daterange'
    if (subType) {
      type = types[subType]
    }
    if (type === types['timePicker']) {
      this.compType = 'time'
      this.showFormat = 'HH:mm:ss'
      this.format = this.showFormat
    }
    if (subType === 'dateTimePicker') {
      this.showFormat = 'yyyy-MM-dd HH:mm:ss'
    }
    this.type = type || this.type
  },
  mounted() { this.value = this.$props.items.value },
  methods: {
    change(e) {
      let value = []
      const { type, startkey, key, endkey, format } = this.$props.items
      if (!e) {
        value = [undefined, undefined]
      } else {
        if (this.compType === 'date') {
          const f = format || this.format
          value = [dayjs(e[0]).format(f), dayjs(e[1]).format(f)]
        } else {
          value = [...e]
        }
      }
      this.$parent.gatherParams({
        type,
        key,
        startkey,
        endkey,
        value
      })
    }
  }
}
</script>
<style scoped>
 .timeRange-warp {
   display: inline-block;
 }
</style>
